<template>
  <p>Home</p>
  <p>ref</p>
  <p>{{ count }}</p>
  <p>{{ test }}</p>
  <p>reactive</p>
  <p>obj:{{ obj }}</p>
  <p>obj.name:{{ obj.name }}</p>
  <p>obj.age:{{ obj.age }}</p>
  <p>arr:{{ arr }}</p>
  <p>arr[0]:{{ arr[0] }}</p>
  <p>computed=================</p>
  <p>countaddfive:{{ countaddfive }}</p>
  <p>methods============</p>
  <button @click="countaddone">+1</button>
  <button @click="countaddtwo">+2</button>
  <button @click="updateobj">更新obj</button>
</template>
<script>
import { ref, reactive, computed, watch } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const test = ref('hello world')
    console.log(count.value)
    //
    const obj = reactive({
      name: 'tom',
      age: 6
    })
    const arr = [1, 2, 3, 4, 5, 6]

    console.log('obj.name', obj.name)

    const countaddfive = computed(() => {
      return count.value + 5
    })
    //
    function countaddone() {
      count.value++
    }
    const countaddtwo = () => {
      count.value += 2
    }
    const updateobj = () => {
      updateobjname()
    }
    const updateobjname = () => {
      obj.name = 'sb'
    }
    //watch
    watch(count, (newval, oldval) => {
      console.log('count改变了')
      console.log('newval', newval)
      console.log('oldval', oldval)
    })
    watch(countaddfive, (newval, oldval) => {
      console.log('countaddfive改变了')
      console.log('newval', newval)
      console.log('oldval', oldval)
    })
    watch(obj, (newval, oldval) => {
      console.log('obj改变了')
      console.log('newval', newval)
      console.log('oldval', oldval)
    })
    watch(
      () => obj.name,
      (newval, oldval) => {
        console.log('obj.name改变了')
        console.log('newval', newval)
        console.log('oldval', oldval)
      }
    )

    return {
      count,
      test,
      obj,
      arr,
      countaddfive,
      countaddone,
      countaddtwo,
      updateobj
    }
  }
}
</script>
